// 引入common.less文件
@import "common";
@basefont: 50;
// 在750px下的布局
body {
    min-width: 320px;
    width: 15rem;
}
// 设置顶部样式
.top {
    // background: -webkit-linear-gradient(top, rgb(234, 106, 155), #fff);
    .log {
        display: flex;
        position: fixed;
        top: 0;
        left: 50%;
        width: 750rem / @basefont;
        height: 88rem / @basefont;
        background-color: #FFC001;
        transform: translateX(-50%);
        // 设置超链接的样式
        a {
            width: 44rem/ @basefont;
            height: 70rem/ @basefont;
            margin: 6rem / @basefont 25rem / @basefont 7rem / @basefont 24rem / @basefont;
            img {
                width: 100%;
                height: 100%;
            }
        }
        // 设置中间搜索框的样式
        .input {
            position: relative;
            flex: 1;
            &::before {
                position: absolute;
                display: inline-block;
                content: "";
                top: 32rem / @basefont;
                left: 25rem / @basefont;
                width: 28rem / @basefont;
                height: 28rem / @basefont;
                background: url(../image/ss.png) no-repeat;
                background-size: 28rem / @basefont;
            }
            // 设置表单的样式
            input {
                width: 100%;
                height: 70rem / @basefont;
                border: 0;
                margin-top: 11rem / @basefont;
                padding-left: 70rem / @basefont;
                font-size: 25rem / @basefont;
                color: #757575;
                border-radius: 35rem / @basefont;
            }
        }
    }
    // 设置通栏样式
    .banner {
        overflow: hidden;
        width: 750rem / @basefont;
        // height: 500px;
        // border-radius: 10rem / @basefont;
        margin: 0 auto;
        img {
            width: 100%;
        }
    }
    // 设置广告样式
    .ad {
        display: flex;
        width: 750rem / @basefont;
        border-radius : 20rem / @basefont;
        img {
            flex: 1;
            width: 250rem / @basefont;
        }
    }
}
// 设置菜单栏样式
.menu {
    width: 750rem / @basefont;
    margin: 0 auto;
    ul {
        // display: flex;
        width: 100%;
        list-style: none;
        // flex-wrap: wrap;
        li {
            float: left;
            width: 20%;
            a {
                font-size: 20rem / @basefont;
                color: #666;
                text-align: center;
                img {
                    display: block;
                    width: 84rem / @basefont;
                    height: 84rem / @basefont;
                    margin: 0 auto;
                }
                span {
                    display: block;
                }
            }
            
        }
    }
}
// 设置红包界面
.money {
    padding-top: 20rem / @basefont;
    width: 750rem / @basefont;
    a {
        display: inline-block;
        float: left;
        img {
            width: 100%;
            height: 234rem / @basefont;
        }
    }
    a:nth-child(1) {
        width: 373rem / @basefont;
    }
    a:nth-child(2) {
        width: 186rem / @basefont;
        
    }
    a:nth-child(3) {
        width: 187rem / @basefont;       
    }
    a:nth-child(n+2) {
        margin-left: 1rem / @basefont;
    }
}
// 设置商品区域样式
.goods {
    width: 750rem / @basefont;
    background-color: #f7f7f7;
    ul {
        list-style: none;
        margin: 15rem / @basefont 25rem / @basefont 0;
        background-color: #fff;
        border-radius: 15rem / @basefont;
        li {
            display: flex;
            .left,
            .right {
                flex: 1;
                h3 {
                    font-size: 25rem / @basefont;
                    color: #333;
                }
                p {
                    margin-top: 15rem / @basefont;
                    font-size: 20rem / @basefont;
                    color: #999;
                }
                .foo {
                    display: flex;
                    a {
                        flex: 1; 
                        text-align: center;                       
                        img {
                                width: 120rem / @basefont;        
                                margin-top: 5rem / @basefont;
                            }
                        span {
                            display: block;
                            color: #333;
                            font-size: 18rem / @basefont;
                            margin-top: 3rem / @basefont;
                        }
                    }
                }
            }   
            .left {
                border-right: 1px solid #ccc;
            }        
        }
    }
}
// 设置推荐区域
.recom {
    width: 700rem / @basefont;
    margin: 0 20rem / @basefont;
    border-top: 1px solid #ccc;
    .recom_left {
        float: left;
        margin-left: 18rem / @basefont;
        width: 173rem / @basefont;
        height: 172rem / @basefont;
        h3 {
            margin-top: 52rem / @basefont;
            margin-bottom: 11rem / @basefont;
            font-size: 30rem / @basefont;
            color: #444;
        }
        p {
            font-size: 22rem / @basefont;
            color: #999;
        }
    }
    .recom_right {
        float: left;
        height: 172rem / @basefont;
        ul {
            list-style: none;
            li {
                float: left;
                list-style: none;
                width: 120rem / @basefont;
                a {
                    text-align: center;
                    img {
                        display: block;
                        margin: 0 auto;
                        width: 100%;
                    }
                    span {
                        display: block;
                        font-size: 20rem / @basefont;
                        color: #333;
                    }
                }
               
            }
            li:nth-child(-n+3) {
                margin-right: 9rem / @basefont;
            }
        }
    }
}
// 设置底部图片样式
.pic {
    width: 750rem / @basefont;
    img {
        width: 100%;
    }
}
// 设置底部样式
footer {
    position: fixed;
    bottom: 0;
    width: 750rem / @basefont;
    .loggin {
        height: 90rem / @basefont;
        background-color: rgba(51, 51, 51, .95);
        padding-left: 20rem / @basefont;
        p {
            display: inline-block;
            line-height: 90rem / @basefont;
            font-size: 24rem / @basefont;
            color: #fff;
        }
        a {
            position: absolute;
            top: 20rem / @basefont;
            right: 20rem / @basefont;
            display: inline-block;
            width: 165rem / @basefont;
            height: 50rem / @basefont;
            background-color: #ffdb47;
            line-height: 50rem / @basefont;
            text-align: center;
            font-size: 24rem / @basefont;
            color: #181a20;
            border-radius: 13rem / @basefont;
        }
    }
    .foot {
        // margin-top: 10rem / @basefont;
        background-color: #fff;
        ul {
            display: flex;
            li {
                flex: 1;
                img {
                    display: block;
                    width: 48rem / @basefont;
                    margin: 0 auto;
                    margin-top: 16rem / @basefont;
                    margin-bottom: 10rem / @basefont;
                }
                span {
                    display: block;
                    font-size: 18rem / @basefont;
                    text-align: center;
                }
            }
        }
    }
}